<template>
  <MdEditor theme="dark" 
  codeTheme="github"
  @onSave="onSave" 
   :toolbars="toolbars" 
    previewTheme="cyanosis"
    v-model="articelStore.articleEdit.body"
    @onUploadImg="onUploadImg"

    style="height: 700px;" 
    :sanitize="sanitize"
   
    />
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import { config } from 'md-editor-v3';
import { lineNumbers } from '@codemirror/view';
import { uploadFILE } from '../api/file/index'
import { ArticleStore } from '../store/articelStore/index'
import {sanitize} from '../filter/index'
const emit = defineEmits(['saveArticle'])
const articelStore = ArticleStore()
// const mdHeadingId = (_text:string, _level:number, index:number) => `passlink-${index}`;




const toolbars:any = [
  'bold'
  ,
  'underline'
  ,
  'italic'
  ,
  '-'
  ,
  'title'
  ,
  'strikeThrough'
  ,
  'sub'
  ,
  'sup'
  ,
  'quote'
  ,
  'unorderedList'
  ,
  'orderedList'
  ,
  'task'
  ,
  '-'
  ,
  'codeRow'
  ,
  'code'
  ,
  'link'
  ,
  'image'
  ,
  'table'
  ,
  'mermaid'
  ,
  'katex'
  ,
  '-'
  ,
  'revoke'
  ,
  'next'
  ,
  'save'
  ,
  '='
  ,
  'pageFullscreen'
  ,
  'preview'
  ,
  'htmlPreview'
  ,
  'catalog'

];

function onSave(){
  emit("saveArticle")
}

config({
  codeMirrorExtensions(_theme, extensions) {
    return [...extensions, lineNumbers()];
  }
});

const onUploadImg = async (files: File[], callback: any) => {
  if (files[0].size > 10 * 1024 * 1024) {
    console.log("文件超过10Mb");
    return;
  }

  if (files.length > 1) {
    console.log("仅支持上传一张图片");
    return;
  }

  try {
    const res: any = await uploadFILE({ "file": files[0] });
    //返回地址
    console.log(res)
    callback([res.data.data]);
  } catch (error) {
    console.log("上传失败");
  }
};
//监控

onMounted(() => {

})
// 拖拽上传
// const onDrop = (e: DragEvent) => {
//   // e.stopPropagation();
//   // onUploadImg(e.dataTransfer?.files as unknown as File[], () => {});
//   // console.log('ee', e.dataTransfer?.files);
//   console.log("暂不支持拖拽上传文件");
  
// };

</script>






<style lang="scss" scoped></style>